<script lang="ts" setup>
import { provide, ref, onMounted } from "vue";

interface FormProps {
  direction?: string;
  labelWidth?: string;
}

const props = withDefaults(defineProps<FormProps>(), {
  direction: "horizontal",
  labelWidth: "120px",
});
const formRef = ref();

provide("direction", props.direction);

onMounted(() => {
  if (formRef.value && props.direction === "horizontal") {
    let maxWidth = 0;
    const labels = formRef.value.querySelectorAll(".label");
    for (let i = 0; i < labels.length; i++) {
      const element = labels[i];
      maxWidth = Math.max(maxWidth, element.getBoundingClientRect().width);
    }
    for (let i = 0; i < labels.length; i++) {
      const element = labels[i];
      element.style.width = maxWidth + "px";
    }
  }
});
</script>

<template>
  <div class="umi-form" ref="formRef">
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
.umi-form {
  display: flex;
  flex-direction: column;
  gap: 16px;

  ::v-deep(.umi-form-item .label) {
    width: var(--label-width);
  }
}
</style>
